<template>
  <div id="hotMusic" >
    <h2 class="fontsize-24 line">{{$t('m.hot')}}<span href="" class="underLine" style="color: #31c27c">{{$t('m.music')}}</span></h2>
    <div id="home-music">
      <a href="#" v-for="item in music.slice(0,7)" :key="item.musicId">
        <router-link :to="{name:'musicInfo',params: {id: item.musicNameEn}}">
        <div class="upImgCom">
          <img class="home-music-box" :src="item.albumImg" alt=""/>
        </div>
        <p class="tab-hidden titleName" style="font-weight: 500;margin: 5px 0">{{item.musicName}}</p>
        <div class="lab-hidden">
          <span class="lab" v-for="lab in item.musicGen.split(' ').splice(0,3)" :key="lab.id">{{lab}}</span>
        </div>
          </router-link>
      </a>
    </div>
  </div>
</template>

<script>
  import api from "../../model/api";

  export default {
    name: 'hotMusic',
   data() {
      return {
        musicName:'作品名',
        music:[],
     }
   },
    created() {
      this.getMusicInfo()

    },
    methods:{

      getMusicInfo(){
        api.getMusic().then(res => {
          this.music = res.data
        })

      }
  }
  }

</script>

<style lang="less" scoped>
  #hotMusic{
    font-size: 0;
    /*width: 100%;*/
    /*height: 345px;*/
    /*background-color: #4dffd3;*/
    /*overflow: hidden;*/
    margin-top: 60px;
    /*background-color: red;*/
  }
  /******************/
  h2{
    margin-bottom: 10px;
  }
  .boxOfi{
    position: absolute;
    right: 15px;
  }

  .top{
    width: 0;
    height: 0;
    border-left: 30px solid #313131;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-top: 30px solid #313131;
    position: absolute;
    border-radius: 6px 0 0 0;
    z-index: +1;
  }
  .topNum{
    position: absolute;
    font-size: 36px;
    font-style: italic;
    font-weight: 900;
    top: -5px;
    left: 2px;
    text-shadow: 3px 1px 0 #000000;
    z-index: +2;
  }
  #home-music {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /*background-color: red;*/

    .home-music-box {
      width: 170px;
      height: 100%;
      /*background-color: #ffad4b;*/
      border-radius: 6px;
      transition: all 0.1s ease-in-out;
    }
    /*.home-music-box:hover{*/
    /*  box-shadow: -5px 5px 0 #b4b4b4;*/
    /*  transform: translate3d(5px, -5px, 0);*/
    /*}*/
    .upImgCom{
      border-radius: 6px;
      margin-right: 12.4px;
      transition: all 0.1s ease-in-out;
    }
    .upImgCom:hover{
      box-shadow: -5px 5px 0 #31c27c;
      transform: translate3d(5px, -5px, 0);
    }
    a {
      display: inline-block;
      position: relative;
      margin-bottom: 5px;
    }
  }
</style>


